<template>
  <div>
    <h1>餐具报废管理</h1>
    <el-button class="back-button" type="text" @click="goBack">
      <i class="el-icon-arrow-left"></i>返回
    </el-button>
    <!-- 报废列表 -->
    <el-table :data="scrapItems">
      <el-table-column prop="reason" label="报废原因"></el-table-column>
      <el-table-column prop="date" label="报废日期"></el-table-column>
    </el-table>

    <!-- 报废表单 -->
    <el-form @submit="submitScrapForm">
      <el-form-item label="报废原因">
        <el-input type="textarea" v-model="scrapForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="报废日期">
        <el-date-picker v-model="scrapForm.date" type="date"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交报废反馈</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scrapItems: [
          { reason: '损坏', date: '2023-07-06' },
          { reason: '磨损严重', date: '2023-07-07' },
          { reason: '过期', date: '2023-07-08' },
        ],
        scrapForm: {
          reason: '',
          date: ''
        }
      };
    },
    methods: {
      submitScrapForm() {
        // 更新报废列表
        this.scrapItems.push({
          reason: this.scrapForm.reason,
          date: this.scrapForm.date
        });

        // 修改库存信息并更新列表
        // ...

        // 清空报废表单
        this.scrapForm = {
          reason: '',
          date: ''
        };
      },
      goBack() {
        // 执行退出登录的逻辑
        // 返回登录页
        this.$router.push('/Index');
      }
    }
  };
</script>
